<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <h3>银行账户余额变更通知</h3>
    <p>账户：468546494+</p>
    <p> 余额：{{count}} </p>
        支取人民币：<input type="text"  v-model="money"/>&nbsp;&nbsp;
    <button type="button" @click="changeMoney()">支取{{money}}元</button>
    <p>支取后余额为：{{count}}元</p>
    <h3>支取明细</h3>
    {{detail}}
    <hr>
    </div>
</body>
<script type="text/javascript">
    const appCom = {
        data(){
            return {
                count:100000,
                money:500,
                record:[],
            }
        },
        watch:{
            count(newValue,oldValue){
                alert('账户余额为：'+oldValue + '变为' + newValue + '元！');
            }
        },
        methods:{
       changeMoney(){
            if(this.money <= 0){
                alert('请输入正确取款金额!');
                return;
            }
             if(this.money > this.count){
            alert('余额不足，请重新输入取款金额!');
             return;
            }
        //余额减少
        this.count = this.count - this.money;
        //记录取款金额
          this.record.push(this.money);
        }
        },
        computed:{
        detail() {
         let str = '';
         for(let i = 0; i < this.record.length; i++){
         str = str + '第' + (i + 1) + '次取款：' + this.record[i] + '元；';
        }
         return str;
        }
    }
        };
        const app = Vue.createApp(appCom).mount("#app");
</script>
</html>